<template>
  <div class="a">
    <el-form label-width="80px">

      <el-form-item class="item" label="账号">
        <el-input v-model="list.username"></el-input>
      </el-form-item>

      <el-form-item class="item" label="密码">
        <el-input v-model="list.password"></el-input>
      </el-form-item>

      <el-form-item class="item" label="昵称">
        <el-input v-model="list.name"></el-input>
      </el-form-item>

      <el-form-item label="用户头像">
        <!-- 头衔缩略图 -->

        <template slot-scope="scope">

          <img :src="list.salt" style="width: 20%;height: 20%">

          <!-- 文件上传按钮 -->
          <!--这个吊毛不经过axios必须写全服务器的地址-->
          <el-upload
            class="upload-demo"
            action="http://127.0.0.1:8003/user/upload/"
            :on-success="
            (res) => {
              return  (uploadSuccess(res))
             }"
            enctype="multipart/form-data">

            <el-button size="small" type="primary">点击上传</el-button>

            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

        </template>


      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click=" saveOrUpdate() " style="width: 300px">立即创建</el-button>
        <el-button style="width: 200px">取消</el-button>
      </el-form-item>


    </el-form>
  </div>
</template>
<script>
import UserApi from '../../../api/pc/aclUser/infoList'

export default {
  data() {

    return {
      list: {//传回去的集合
        id: '',
        name: '',
        username: '',
        salt: '',
        password: ''
      }

    }
  },

  created() {
    this.init()
  },

  watch: {
    $route(to, from) {//路有变化的方式  路由发生变化就会执行
      this.init()
    }
  },

  methods: {
    uploadSuccess(res) {
      this.list.avatar = res.data.url
    },
    /**
     * 通过ID初始化值
     * @param id
     */

    getInfo(id) {
      UserApi.getUserById(id)
        .then(response => {
          this.list = response.data.user
        })
    },

    /**
     * 判断路径是否有id
     */

    upload() {
      UserApi.Upload(this.file)
        .then(response => {
          console.log(response.data.url)
        })
    },

    init() {
      if (this.$route.params && this.$route.params.id) {
        const id = this.$route.params.id
        this.getInfo(id)
      } else {
        this.list = {}
        console.log(this.list.avatar)
      }
    },

    /**
     * 根据User是否有id
     * 判断修改还是添加
     */
    saveOrUpdate() {

      if (this.list.id) {
        //  添加
        this.updateUser()

      } else {
        this.saveUser()
      }

    },

    //添加航班信息
    saveUser() {

      //调用增加接口
      UserApi.addUser(this.list)
        .then(response => {
          // 提示信息
          console.log('对了')
          this.$message({
            type: 'success',
            message: '添加成功!'
          })
          // 路由跳转
          this.$router.push({ path: '/user/table/admin' })
        })

    },

    updateUser(list) {

      //调用增加接口
      UserApi.updateUserInfo(this.list)
        .then(response => {
          this.$message({
            type: 'success',
            message: '修改成功!'
          })
          // 路由跳转
          this.$router.push({ path: '/user/table/admin' })
        })
    }

  }
}
</script>
<style>
.a {
  border: #4a4b9d 10px solid;
  border-radius: 30px;
  width: 850px;
  margin-top: 30px;
  margin-left: 250px;
  padding-right: 20px;
  padding-top: 10px;

}

/*<!--
 .item: 是绑定class的
 .el-form-item__label: 自动匹配form表单中label的(注意:中间是连续的两个'_')
-->*/

.item .el-form-item__label {
  color: black;
}
</style>
